import logo from '@/assets/images/logo.png';
import QRCode from '@/assets/images/QrCode.jpg';
import {getLocale, history, Outlet, setLocale, useLocation, useNavigate,} from '@umijs/max';
import {Button, Col, Image, Layout, Menu, Row} from 'antd';
import {useEffect, useState} from 'react';
import styles from './index.less';
import {useIntl} from "@@/exports";

const { Header, Content, Footer } = Layout;

export default () => {

  useEffect(() => {
    window.scrollTo(0, 0)
  }, [history.location.pathname]);

  const intl = useIntl();
  const getText = (id: string) => {
    return intl.formatMessage({id})
  }

  const banner = ['home', 'product', 'joinUs', 'aboutUs'];
  const bannerItems = banner.map((item) => ({
    key: item,
    label: getText(`banner.${item}`),
  }));

  const [currentBanner, setCurrentBanner] = useState(banner[0]);
  const [currentLocale, setCurrentLocale] = useState('');
  const location = useLocation();
  const navigate = useNavigate();
  useEffect(() => {
    let locale = getLocale();
    setCurrentLocale(locale);
  }, []);
  useEffect(() => {
    console.log(location.pathname.split('/')[1]);
    setCurrentBanner(location.pathname.split('/')[1]);
  }, [location]);

  const handleChangeLocale = () => {
    setLocale(currentLocale === 'zh-CN' ? 'en-US' : 'zh-CN');
  };
  const handleBannerClick = (e: any) => {
    setCurrentBanner(e.key);
    navigate(e.key);
  };
  return (
    <Layout className={styles.layout}>
      <Header className={styles.header}>
        <Row align={'middle'} justify={'space-around'}>
          <Col push={2} style={{lineHeight: 0}} span={4}>
            <img width={'auto'} height={'25px'} src={logo}/>
          </Col>
          <Col push={3} span={12} className={styles.menu}>
            <Menu
              theme="dark"
              onClick={handleBannerClick}
              selectedKeys={[currentBanner]}
              mode="horizontal"
              items={bannerItems}
            />
          </Col>
          <Col push={1} span={2}>
            <Button type={'link'} onClick={handleChangeLocale}>
              {currentLocale === 'zh-CN' ? 'EN' : '中'}
            </Button>
          </Col>
        </Row>
      </Header>

      <Content>
        <div className={styles.content}>
          <Outlet/>
        </div>
        <Footer className={styles.footer}>
          <div className={styles.container}>
            <div className={styles.contact}>
              <h3>联系我们</h3>
              <div className={styles.info}>
                浙江省杭州市临平区南苑街道新丰路199号余杭商会大厦A座3A层
              </div>
              <div className={styles.info}>
                服务时间：周一至周五（9:00-18:00）
              </div>
              <div className={styles.info}>
                联系热线：<span>0571-8622 5215</span>
              </div>
              <div className={styles.info}>
                公司邮箱：<span>service@lianqicloud.com</span>
              </div>
            </div>
            <div className={styles.qrCode}>
              <Image preview={false} src={QRCode}/>
              <p style={{color: '#fff'}}>公众号</p>
            </div>
          </div>
          <div className={styles.copyright}>
            <span>© 2021-2023 Lianqi Cloud All rights reserved.</span>

            <span
                style={{cursor: 'pointer'}}
                onClick={() => {
                  window.open('https://beian.miit.gov.cn/');
                }}
            >
            浙ICP备2023014658号-1
          </span>

            <span
                style={{cursor: 'pointer'}}
                onClick={() => {
                  window.open(
                      'https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011302000390',
                  );
                }}
            >
            <img
                style={{width: '18px'}}
                src={
                  'https://www.lianqicloud.com/img/copyright/style_01/beiab.png'
                }
            />
            浙公网安备 33011302000390号
          </span>
          </div>
        </Footer>
      </Content>
    </Layout>
  );
};
